<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" /> 
  <title>资讯管理系统</title>
  <!-- <link rel="stylesheet" href="./css/bootstrap-3.3.7-dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
  <script src="./js/jquery3.5.0.min.js"></script>
  <!-- <script src="./css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> -->
  <script src="./js/index.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

  <!-- 分页 -->
  <link rel="stylesheet" href="./css/jquery.sPage.css">
  <script src="./js/jquery.sPage.js"></script>

  <!-- moment -->
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.min.js"></script>

  <!-- 编辑器 -->
  <script src="./js/wangEditor.js"></script>

  <style>
    body {
      font-size: 14px;
    }
    a {
      color: #666666;
    }
    li:hover {
      color: #0056b3;;
    }
  </style>
</head>
<script>
  $(function() {
    // 点击侧边导航栏切换模块
    $("ul").on("click","li",function() {
        var text = $(this).text();
        $(".header-title").text(text)
        if(text == '系统首页') {
          $(".content-main").load('./pages/home.html')
        } else if(text == '角色权限') {
          $(".content-main").load("./pages/userManager.html")
        } else if(text == '用户管理') {
          $(".content-main").load("./pages/userManager.html")
        } else if(text == '权限管理') {
          $(".content-main").load("./pages/limitManager.html")
        } else if(text == '角色管理') {
          $(".content-main").load("./pages/roleManager.html")
        } else if(text == '分类管理') {
          $(".content-main").load("./pages/classifyManager.html")
        } else if(text == '资讯管理') {
          $(".content-main").load("./pages/messageManager.html")
        } else if(text == '评论管理') {
          $(".content-main").load("./pages/commentManager.html")
        } else if(text == '个人信息') {
          $(".content-main").load("./pages/user.html")
        } 
      })
  
      // 默认点击首页
      $(".home").trigger("click")
  
      // 点击左侧改变样式
      $("ul").on("click","li",function() {
        $(this).css("background","#ffefbf")
        $(this).css("color","#23527c")
        $(this).siblings().css("background","#fff")
        $(this).siblings().css("color","#666")
      })
  
      // 退出登录
      $(".header-user").on("click",function() {
        location.href = './index.html'
      })
    
    
  })
</script>
<body>
  <div class="container-parent">
    <div class="container-left">
      <div class="header-logo">
        <img src="./images/header.png" width="30px" height="30px" alt="">
        <span>资讯管理系统</span>
      </div>
      <nav>
        <ul>
          <li class="home"><i class="fa fa-home"></i><span>系统首页</span></li>
          <!-- <li><i class="fa fa-user-circle"></i><span>用户管理</span></li> -->
          <li>
            <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
              <li><i class="fa fa-user-circle"></i><span>角色权限</span></li>
            </a>
            <div class="collapse" id="collapseExample">
              <div class="card-body">
                <ul>
                  <li>用户管理</li>
                  <li>权限管理</li>
                  <li>角色管理</li>
                </ul>
              </div>
            </div>
          </li>
          <li><i class="fa fa-navicon"></i><span>分类管理</span></li>
          <li><i class="fa fa-file-text"></i><span>资讯管理</span></li>
          <li><i class="fa fa-paper-plane"></i><span>评论管理</span></li>
          <li><i class="fa fa-star"></i><span>个人信息</span></li>
        </ul>
      </nav>
    </div>
    <div class="container-right">
      <div class="header-right">
        <i class="fa fa-navicon"></i>
        <span class="header-title"></span>
        <span class="header-user" title="退出登录">
          <img src="./images/user.gif" width="40px" height="40px" alt="">
        </span>
      </div>
      <div class="container-content">
        <div class="content-main">
          
        </div>
      </div>
    </div>
  </div>
  
</body>

</html>